<template>
<!-- 登录 -->
  <BaseLayoutBox>
    <div class="title">登录</div>
    <el-form
      class="login-form"
      status-icon
      :rules="loginRules"
      :model="loginForm"
      ref="loginFormRef"
      label-width="0"
    >
      <el-form-item label prop="username">
        <el-input
          class="login-input"
          placeholder="请输入学号"
          auto-complete="off"
          maxlength="11"
          v-model.number="loginForm.username"
        >
          <i slot="prefix" class="icon el-icon-mobile-phone"></i>
        </el-input>
      </el-form-item>
      <el-form-item label prop="password">
        <el-input
          class="login-input"
          :type="passwordType"
          placeholder="请输入密码"
          auto-complete="off"
          maxlength="20"
          v-model="loginForm.password"
          show-password
        >
          <i slot="prefix" class="icon el-icon-lock"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="buttonLoading"
          size="large"
          type="primary"
          class="login-submit"
          @click="login"
        >登 录</el-button>
      </el-form-item>
    </el-form>
  </BaseLayoutBox>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      passwordType: "password",
      loginForm: {
        username: 1,
        password: 123456,
      },
      buttonLoading: false,
      loginRules: {
        username: [
          { required: true, message: '学号不能为空', trigger: "blur"},
          { type: 'number', message: '学号必须为数字值'}   
         ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  components: {
    BaseLayoutBox: () => import("components/BaseLayoutBox")
  },
  methods: {
    showPassword() {
      this.passwordType === ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    login() {
      this.$refs.loginFormRef.validate( async valid => {
        if (!valid) return 
        this.buttonLoading = true;
        await this.$http.post("admin/login",this.loginForm)
        .then((res) => {
          console.log(res)
          if(res.status === 200){
            this.$message.success("登录成功!");
            window.sessionStorage.setItem("token", res.data.token);
            window.sessionStorage.setItem("nickname", res.data.data.nickname);
            window.sessionStorage.setItem("username", res.data.data.username);
            this.buttonLoading = false;
            this.$router.push("/home")  
          }      
        })
        .catch((err) => { 
          this.buttonLoading = false;
          this.$message.error(err.response.data.message)
        });
      });
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped >
.title {
  font-size: 22px;
  line-height: 36px;
  text-align: center;
  color: #666;
}
.login-form {
  padding: 20px 40px 0;
  margin: 0 auto;
  i.icon {
    color: #60aefe;
    font-size: 20px;
    vertical-align: middle;
  }
  .el-form-item {
    margin-bottom: 30px;
    line-height: 36px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .login-submit {
    width: 100%;
  }
  .el-button {
    font-size: 16px;
    border-radius: 4px !important;
  }
  .action {
    margin-bottom: 16px;
    overflow: hidden;
    zoom: 1;
    clear: both;
    .forget {
      float: right;
      font-size: 14px;
      &:hover {
        color: #0286df;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
}
</style>